<template>
  <div>
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0" class="menu-title">
          <i class="el-icon-menu"></i>
          <span slot="title">全部订单</span>
        </el-menu-item>
        <el-menu-item index="1" class="menu-title">
          <i class="el-icon-s-order"></i>
          <span slot="title">未支付</span>
        </el-menu-item>
        <el-menu-item index="2" class="menu-title">
          <i class="el-icon-s-order"></i>
          <span slot="title">未出行</span>
        </el-menu-item>
        <el-menu-item index="3" class="menu-title">
          <i class="el-icon-s-order"></i>
          <span slot="title">已完成</span>
        </el-menu-item>
        <el-menu-item index="4" class="menu-title">
          <i class="el-icon-s-order"></i>
          <span slot="title">已取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div style="width: auto">
      <el-card>
        <div slot="header" class="clearfix">
          <span style="border-left: 6px solid #409eff; padding-left: 8px">
            {{
            elCardTitleShow()
            }}
          </span>
        </div>

        <!-- 订单列表 -->
        <!-- <div class="order-list"> -->
        <!-- 搜索框 -->
        <div class="search-input">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-input v-model="orderNo" placeholder="请输入订单号"></el-input>
            </el-col>
          </el-row>
        </div>
        <!-- 订单列表 -->
        <el-table :data="filteredOrderList" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline style="text-align: center;">
                <el-form-item>
                  <el-descriptions
                    class="margin-top"
                    title="订单详细信息"
                    direction="vertical"
                    :column="5"
                    :size="size"
                    border
                  >
                    <el-descriptions-item>
                      <template slot="label">航空公司</template>
                      {{ props.row.airline }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">航班号</template>
                      {{ props.row.flightNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">出发时间</template>
                      {{ props.row.departureTime.replace("T", " ") }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">到达时间</template>
                      {{ props.row.arrivalTime.replace("T", " ") }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">出发机场</template>
                      {{ props.row.departureAirport }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">到达机场</template>
                      {{ props.row.arrivalAirport }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">舱位</template>
                      {{ props.row.cabin }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">购买数量</template>
                      {{ props.row.buyNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">总计</template>
                      {{ props.row.price * props.row.buyNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">联系人电话</template>
                      {{ props.row.contactPhone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">乘机人信息</template>
                      <div v-for="(pax, index) in props.row.paxList" :key="index">
                        <el-row>
                          <el-col :span="3">
                            <span>姓名：{{ pax.paxName }}</span>
                          </el-col>
                          <el-col :span="1">
                            <el-divider direction="vertical"></el-divider>
                          </el-col>
                          <el-col :span="5">
                            <span>证件类型：{{ idType(pax.certificateType) }}</span>
                          </el-col>
                          <el-col :span="1">
                            <el-divider direction="vertical"></el-divider>
                          </el-col>
                          <el-col :span="8">
                            <span>证件号：{{ pax.certificateNo }}</span>
                          </el-col>
                          <el-col :span="1">
                            <el-divider direction="vertical"></el-divider>
                          </el-col>
                          <el-col :span="4">
                            <span>{{ props.row.status === 1 ? "未支付" : (props.row.status === 4 ? "已取消" : "座位号："+pax.seatNumber) }}</span>
                          </el-col>
                        </el-row>
                      </div>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" align="center"></el-table-column>
          <el-table-column label="航班信息" align="center">
            <template slot-scope="{ row }">
              <div>{{ row.airline }}</div>
              <div>{{ row.flightNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column label="出发信息" align="center">
            <template slot-scope="{ row }">
              <div class="time-info">
                <div class="time">{{ row.departureTime.replace("T", " ") }}</div>
                <div class="airport">{{ row.departureAirport }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" align="center">
            <i class="el-icon-minus"></i>
          </el-table-column>
          <el-table-column label="到达信息" align="center">
            <template slot-scope="{ row }">
              <div class="time-info">
                <div class="time">{{ row.arrivalTime.replace("T", " ") }}</div>
                <div class="airport">{{ row.arrivalAirport }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="cabin" label="舱位" align="center"></el-table-column>
          <el-table-column prop="buyNumber" label="购买数量" align="center"></el-table-column>

          <el-table-column label="总计" align="center">
            <template slot-scope="{ row }">{{ row.price * row.buyNumber }}</template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态" align="center">
            <template slot-scope="{ row }">{{ stateStr(row.status)}}</template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="pageNo"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            :total="counts"
            v-if="orderList.length > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- </div> -->
      </el-card>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      activeIndex: "0", // 当前激活的选项卡
      orderNo: "", //搜索框
      orderList: [],
      pageNo: 1,
      pageSize: 10,
      counts: 20, // 总条数，用于分页
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    async handleChange(value) {
      this.$message({
        message: "网络错误",
        type: "warning",
      });
    },
    //单页条数改变时
    async handleSizeChange() {
      this.selOrders();
    },
    // 当前页码改变时
    async handleCurrentChange() {
      this.selOrders();
    },
    async selOrders() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      await this.$axios
        .post("/api/orders/selM", params, {
          headers: { Authorization: "emp" },
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.counts = res.data.data.counts;
            // this.pageNo = res.data.data.pageNo;
            // this.pageSize = res.data.data.pageSize;
            this.orderList = res.data.data.items;
          } else if (res.data.code === 0) {
          }
        });
    },
    idType(type) {
      switch (type) {
        case "1":
          return "身份证";
        case "2":
          return "护照";
        case "3":
          return "港澳通行证";
        case "4":
          return "台湾通行证";
        default:
          return "";
      }
    },
    //搜索框条件过滤
    filteredOrders() {
      return this.orderList.filter((order) => {
        return order.orderNo.indexOf(this.orderNo) !== -1;
      });
    },
    // 订单状态
    stateStr(state) {
      switch (state) {
        case 1:
          return "未支付";
        case 2:
          return "未出行";
        case 3:
          return "已完成";
        case 4:
          return "已取消";
        default:
          return "";
      }
    },
    //卡片标题切换
    elCardTitleShow() {
      switch (this.activeIndex) {
        case "0":
          return "全部订单";
        case "1":
          return "未支付";
        case "2":
          return "未出行";
        case "3":
          return "已完成";
        case "4":
          return "已取消";
        default:
          return "全部订单";
      }
    },
  },
  created() {
    this.selOrders();
  },
  computed: {
    filteredOrderList() {
      //订单类型标签切换
      let result = [...this.filteredOrders()];
      //返回过滤后的订单列表
      switch (this.activeIndex) {
        case "0":
          return result;
        case "1":
          return result.filter((order) => order.status === 1);
        case "2":
          return result.filter((order) => order.status === 2);
        case "3":
          return result.filter((order) => order.status === 3);
        case "4":
          return result.filter((order) => order.status === 4);
        default:
          return result;
      }
    },
  },
};
</script>

<style scoped>
.menu-title {
  height: 65px;
  font-size: 18px;
}
.search-input {
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>